{:W('Cate/header')}
{:W('Cate/left')}
<!--内容部分-->
<div class="content">
    <div class="title">
        <p>设备管理</p>
        <i class="icon-angle-right"></i>
        <p class="active1"><a href="#" onClick="javascript :history.go(-1);" style="color:#515974">设备列表</a></p>
        <i class="icon-angle-right"></i>
        <p class="active">设备详情</p>
    </div>
    <div style="width:100%;padding:0 10px;">
        <div class="main_title2">
            <ul class="clearfix">
                <li>
                    <em style="color: #1181cd;">{$param['name']}</em> / 设备名称
                </li>
                <notempty name="param['username']">
                    <li>
                        <em style="color: #1181cd;">{$param['username']}</em> / 设备账号
                    </li>
                </notempty>
            </ul>
        </div>
    </div>
    <div class="admin_list clearfix">
        <div class="main">
            <div class="main_list" style="padding-top:15px;">
                <div class="main_list_list device_list">
                    <dl>
                        <dt>
                            <span style="width:5%">序号</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">资源名称</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">所属资源组</span>
                            <span style="width:35%;text-align:left;padding-left:20px;">能力集合</span>
                            <span style="width:10%">已授权用户数</span>
                            <span style="width:20%">操作</span>
                        </dt>
                        <volist name="array['channels']" id='row' key="k">
                        <dd>
                            <span style="width:5%">{$k}</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">{$row['name']}</span>
                            <span style="width:15%;text-align:left;padding-left:20px;">{$row['resgroupname']}</span>
                            <span style="width:35%;text-align:left;padding-left:20px;">{$row['ability']}</span>
                            <span style="width:10%">{$row['usernum']}</span>
                            <span style="width:20%">
                                <a class="sq" href="javascript:;" data-json='{$row|json_encode}'>资源授权</a>
                                <a class="xg" href="javascript:;" data-json='{$row|json_encode}'>资源配置</a>
                                <a class="bj" href="{:U('device_list/device_list_bj',['resids'=>$row['id']])}">报警配置</a>
                            </span>
                        </dd>
                        </volist>
                    </dl>
                </div>
            </div>
            <div class="fy" id="page"></div>
        </div>
    </div>
</div>

<!--弹框-->
<!--添加子组织-->
<div class="hk"></div>
<div class="add_group xg_device">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">资源配置
    </div>
    <div class="add_group_center" style="height:auto">
        <ul>
            <li>
                <span>
                    <i>*</i>资源名称：
                </span>
                <input value="" name="name" maxlength="20" type="text">
            </li>
            <li>
                <span>
                    <i></i>所属资源组：
                </span>
                <img src="__PUBLIC__/images/i_xiala.png" class="sj icon-sort-down">
                <input value="" name="groupid" class="yh_list" placeholder="请选择资源组"  type="text">
                <div class="list" style="overflow-y:scroll;max-height: 200px;">
                    <ul class="active"></ul>
                </div>
            </li>
            <li class="clearfix">
                <span>
                    <i></i>能力集合：
                </span>
                <div class="checkbox_list" style="height:auto">
                    <label>
                        <input type="checkbox" value="" name="checkbox_zy">全选
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000001" name="checkbox_zy2">主码流
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000002" name="checkbox_zy2">子码流
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000004" name="checkbox_zy2">云台
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000008" name="checkbox_zy2">语音
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000010" name="checkbox_zy2">对讲
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000020" name="checkbox_zy2">wifi探针
                    </label>
                    <label>
                        <input type="checkbox" value="0x00000040" name="checkbox_zy2">农业传感
                    </label>
                </div>
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>

<!--资源授权-->
<div class="add_group device_tk" >
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">资源授权设置
    </div>
    <div class="device_list_center clearfix">
        <div class="center_left">
            <div class="center_left_title">
                <img src="/Public/images/i_weishouquan.png">未选中
            </div>
            <div class="center_left_t">
                <input type="checkbox" value="" name="box">
                全选
            </div>
            <div class="center_left_list">
                <!-- 用户分组 -->
                <div class="title_t">所属用户组</div>
                <ul class="active"></ul>
                <!-- 用户列表 -->
                <div class="title_t">用户</div>
                <ul class="active"></ul>
            </div>
        </div>
        <div class="center_center">
            <button id="add_Authorized">添加授权<i class="icon-double-angle-right"></i></button>
            <button id="remove_Authorized"><i class="icon-double-angle-left"></i>删除授权</button>
        </div>
        <div class="center_right">
            <div class="center_right_title">
                <img src="__PUBLIC__/images/yishouquan.png">已授权
            </div>
            <div class="center_right_t">
                <input type="checkbox" value="" name="box2">
                全选
            </div>
            <div class="center_right_list">
                <ul></ul>
            </div>
        </div>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        //授权
        $('.device_list').find('.sq').each(function () {
            var _this = $(this);
            getPopup(_this,$('.device_tk'));
        });
        //修改
        $('.device_list').find('.xg').each(function () {
            var _this = $(this);
            getPopup(_this,$('.xg_device'));
        });

        // 添加资源组
        $('.device_list').find('.tj').each(function() {
            var _this = $(this);
            getPopup(_this,$('.tj_device'));
        })

        // 初始化资源组
        get_device_class(0);

        // 菜单单击事件，获取子菜单
        var timer = '';
        $('.list ul').on('click','.list_btn',function(){
            clearTimeout(timer);
            var _this = $(this);
            timer = setTimeout(function () {　  // 这里采用执行自定义事件的方式
                var obj = _this.parent('li').attr('data-devices');
                get_device_class(obj);  // 获取子菜单
            }, 300); 　　// 延迟300ms执行单击事件
        })

        // 资源分类菜单双击事件，获取选中的组织，并收缩下拉框
        _groupid = '';   // 资源组id，全局
        $('.list ul').on('dblclick','.list_btn',function(ev){
            ev.stopPropagation();
            clearTimeout(timer);
            // 将选择的分组显示在输入框中
            $('.yh_list').val($(this).text());
            $('.yh_list').click();   // 收缩
            _groupid = $(this).parent('li').attr('data-devices');
        })

        // 所属组织弹出区域显示隐藏
        $('.yh_list,.icon-sort-down').on('click',function () {
            var _this = $(this).parent().find('.list');
            if(_this.is(':hidden')){
                _this.show();
            }else{
                _this.hide();
            }
        });

        //未选中
        selectCheckBox('input[name="box"]','input[name="boxcheck"]');
        //已授权全选
        selectCheckBox('input[name="box2"]','input[name="box2check"]');
        //资源全选
        selectCheckBox('input[name="checkbox_zy"]','input[name="checkbox_zy2"]');

        //授权添加
        $('#add_Authorized').click(function () {
            var aList = $('.center_left_list').find('input[name="boxcheck"]:checked');
            var oRight_list = $('.center_right_list > ul');
            aList.each(function(){
                // 左侧的用户去除
                $(this).parent('li').remove();
                if(oRight_list.find('input[value="'+$(this).val()+'"]').length){  // 匹配过滤已经添加用户
                    return true;
                }
                var _right = '<li><input type="checkbox" value="'+$(this).val()+'" data-name="'+$(this).attr('data-name')+'" name="box2check">'+$(this).attr('data-name')+'</li>';
                oRight_list.append(_right);
            });
        });

        //授权删除
        $('#remove_Authorized').click(function () {
            var aList_r = $('.center_right_list > ul').find('input:checked');
            var oLeft_list = $('.center_left_list ul.active').eq(1);
            aList_r.each(function(){
                // 删除右侧选中的用户
                $(this).parent('li').remove();
                if(oLeft_list.find('input[value="'+$(this).val()+'"]').length){
                    return true;
                }
                var _left = '<li><input type="checkbox" value="'+$(this).val()+'" data-name="'+$(this).attr('data-name')+'" name="boxcheck">'+$(this).attr('data-name')+'</li>';
                oLeft_list.append(_left);
            });
        });

        // 声明资源id
        $('.device_list').on('click','.xg,.sq',function(){
            var _json = $(this).attr('data-json');
            _json = JSON.parse(_json);
            _videoresid = _json.id;   // 全局
            var _class = $(this).attr('class');
            if(_class == 'xg'){   // 修改
                // 初始化能力合集选中状态
                $('.checkbox_list input:checkbox').attr('checked',false);
                $('.xg_device input[name="name"]').val(_json.name);  // 资源名称
                $('.xg_device input[name="groupid"]').val(_json.resgroupname);  // 资源组
                $('.xg_device input[name="groupid"]').next('.list').hide(); // 收缩
                // 默认选中的能力合集
                for(var i in _json.abilityArr){
                    var _ability = $('.checkbox_list input[value="'+_json.abilityArr[i]+'"]');
                    if(_ability.length){
                        _ability.prop('checked',true);
                    }
                }
                _groupid = _json.parentid;   // 资源组id，全局
            }
            if(_class == 'sq'){   // 授权
                $('.center_left_list ul.active').eq(1).empty();  // 分组下的用户初始化
                var obj = 0;
                get_user_class(obj);    // 初始化分类
                $('.center_right_list > ul').empty();   // 右侧已授权用户初始化
                get_already_auth_user(_json.id);   // 获取已授权的用户
            }
        })

        // 修改资源
        $('.xg_device button').eq(0).on('click',function(){
            var _ability =  $('.xg_device input[name="checkbox_zy2"]:checked');
            var ability_string = '';
            _ability.each(function(){
                ability_string += $(this).val()+',';
            })
            var _conf = {
                videoresid:_videoresid,
                name:$('.xg_device input[name="name"]').val(),
                groupid:_groupid,
                ability:ability_string,
            };
            for(var i in _conf){
                if(_conf[i] == '' && i != 'ability' && i != 'groupid'){
                    layer.msg('请填写完整表单！',{icon:2,time:2000});
                    return;
                }
            }
            $.post("{:U('device_list/ConfigResources')}",_conf,function(data){
                if(data.result == '0'){
                    layer.msg('配置成功！',{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 用户分类点击事件
        $('.center_left_list ul.active').eq(0).on('click','.list_btn',function(){
            var obj = $(this).parent('li').attr('data-departments');
            get_user_class(obj);  // 获取子菜单
            // 获取当前菜单下面的用户
            get_department_user(obj);
        })

        // 添加授权
        $('.device_tk .add_group_btn button').eq(0).on('click',function(){
            // 获取右侧选中的数据
            var _right = $('.center_right_list > ul').find('input');
            // 获取右侧授权用户
            var _ids = {};
            _right.each(function(i){
                _ids[i] = {authaccountid:_right.eq(i).val(),privilege:'268435455'};
            })
            $.post("{:U('device_list/ModifyAuthorizationUser')}",{accounts:_ids,resid:_videoresid},function(data){
                if(data.result == '0'){
                    layer.msg("授权成功！",{icon:1,time:2000},function(){
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })
    })

    /*
     * 获取资源分组类
     * @param string|int obj 上级分类id，默认0
     **/
    function get_device_class(obj)
    {
        $.post("{:U('device_group/device_group_json')}",{parentid:obj},function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return false;
            }
            // 遍历分类
            var _parent = $('.list ul.active');
            var _child = $('li[data-devices="'+obj+'"]');
            if(obj == '0'){
                _parent.empty();
            } else {   // 菜单收展效果
                $('span.list_btn').removeAttr('style');   // 清楚所有背景颜色
                _child.find('span').attr('style','background:gray;');   // 给一个灰色的背景代表选中（颜色暂定）
                _child.find('ul').remove();
                var _style = '';  // 默认菜单展开
                if($.trim(_child.find('i').eq(0).attr('class')) == 'icon-caret-down'){
                    _child.find('i').eq(0).attr('class','icon-caret-right');
                    _style = 'display:none;';
                } else {
                    // 当前分类展开的时候，同级分类收缩并清除菜单下面的数据
                    _child.parent().find('i').attr('class','icon-caret-right');
                    _child.parent().find('ul').remove();
                    _child.find('i').eq(0).attr('class','icon-caret-down');
                    _style = 'display:block;';
                }
                _child.append('<ul style="'+_style+'"></ul>');
            }
            for(var i in data.resources){
                if(obj == '0'){   // 一级菜单
                    var _parentLi = '<li data-devices="'+data.resources[i]['id']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.resources[i]['name']+'</span></li>';
                    _parent.append(_parentLi)
                } else {   // 子级菜单
                    var _childLi = '<li data-devices="'+data.resources[i]['id']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.resources[i]['name']+'</span></li>';
                    _child.find('ul').append(_childLi);
                }
            }
            return true;
        })
    }

    /*
    * 获取用户组分类
    * @param string|int obj 上级分类id，默认0
    **/
    function get_user_class(obj)
    {
        $.get("{:U('user_group/user_group_json')}",{parentid:obj},function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return false;
            }
            // 遍历分类
            var _parent = $('.center_left_list ul.active').eq(0);
            var _child = $('li[data-departments="'+obj+'"]');
            if(obj == '0'){
                _parent.empty();
            } else {   // 菜单收展效果
                $('span.list_btn').removeAttr('style');   // 清楚所有背景颜色
                _child.find('span').attr('style','background:gray;');   // 给一个灰色的背景代表选中（颜色暂定）
                _child.find('ul').remove();
                var _style = '';  // 默认菜单展开
                if($.trim(_child.find('i').eq(0).attr('class')) == 'icon-caret-down'){
                    _child.find('i').eq(0).attr('class','icon-caret-right');
                    _style = 'display:none;';
                } else {
                    // 当前分类展开的时候，同级分类收缩并清除菜单下面的数据
                    _child.parent().find('i').attr('class','icon-caret-right');
                    _child.parent().find('ul').remove();
                    _child.find('i').eq(0).attr('class','icon-caret-down');
                    _style = 'display:block;';
                }
                _child.append('<ul style="'+_style+'"></ul>');
            }
            for(var i in data.departments){
                if(obj == '0'){   // 一级菜单
                    var _parentLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.departments[i]['departmentname']+'</span></li>';
                    _parent.append(_parentLi)
                } else {   // 子级菜单
                    var _childLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.departments[i]['departmentname']+'</span></li>';
                    _child.find('ul').append(_childLi)
                }
            }
            return true;
        })
    }

    /*
     * 获取用户分类下面的用户
     * @param string|int obj 用户分组id
     **/
    function get_department_user(obj){
        if(!$.trim(obj)){
            layer.msg('缺少参数！',{icon:2,time:2000});
            return;
        }
        $.post("{:U('user_group/UserList_post')}",{departmentid:obj},function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return;
            }
            var _user = $('.center_left_list ul.active').eq(1);
            _user.empty();
            var oRight_list = $('.center_right_list > ul');
            for(var i in data.accounts){  // 遍历用户，过滤右侧已经有的用户
                if(!oRight_list.find('input[value="'+data.accounts[i]['id']+'"]').length){
                    var _userLi = '<li><input type="checkbox" value="'+data.accounts[i]['id']+'" data-name="'+data.accounts[i]['username']+'" name="boxcheck">'+data.accounts[i]['username']+'</li>';
                    _user.append(_userLi);
                }
            }
        })
    }

    /*
     * 获取设备资源已授权的用户
     * @param string|int obj 资源id
     **/
    function get_already_auth_user(obj){
        if(!$.trim(obj)){
            layer.msg('缺少参数！',{icon:2,time:2000});
            return;
        }
        $.post("{:U('device_list/getAuthorizationUser')}",{resid:obj},function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return false;
            }
            if(data.accounts == null){
                return false;
            }
            var oRight_list = $('.center_right_list > ul');
            for(var i in data.accounts){
                if(!oRight_list.find('input[value="'+data.accounts[i]['id']+'"]').length){
                    var _userLi = '<li><input type="checkbox" value="'+data.accounts[i]['authaccountid']+'" data-name="'+data.accounts[i]['username']+'" name="box2check">'+data.accounts[i]['username']+'</li>';
                    oRight_list.append(_userLi);
                }
            }
        })
    }

</script>
</html>